<template>
  <div class="tw-main">
    <div class="screen">
      <ul class="teach-message-title">
        <li v-for="(item,index) in hero" v-bind:key="item.id" :class="{'teach-message-active':index===titleNumFlag}" @click="ChageitleNumFlag(index,item.labelName)">
          <div class="xlabel">{{item.label}}</div>
          <div class="teach-message-number">{{item.value}}</div>
        </li>
      </ul>
      <el-row class="tw-grid">
        <el-col :span="lgwidth" :lg="lgwidth" class="tw-grid__left">
          <tw-card
          :heightCard="'405px'"
          :label="'招生毕业在校人数'"
          >
           <tw-chart
            :chartOption="baroption2.chartOption"
            :dataset="baroption2.dataset"
            :chartDataMaps="baroption2.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="lgwidth" :lg="lgwidth" :class="lgclass">
          <tw-card
          :heightCard="'405px'"
            :label="'异动情况'">
          <tw-chart
            v-if="pjdata.length>0&&pjdata[1].length>0"
            :options='option'
            @pieselectchanged="pieselectchanged"
            height='302px'
          >
          </tw-chart>
          <div v-else style="width:100%;height:100%;text-align: center;margin-top: 25%;">
            暂无数据
          </div>
          </tw-card>
        </el-col>
        <el-col :span="8" :lg="8" class="tw-grid__right" v-show="isSQshow">
          <tw-card
          :heightCard="'405px'"
          :label="'城乡分布'"
          >
           <tw-chart
            :chartOption="baroption5.chartOption"
            :dataset="baroption5.dataset"
            :chartDataMaps="baroption5.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
      </el-row>
      <el-row class="tw-grid">
        <el-col :span="lgwidth" :lg="lgwidth" class="tw-grid__left">
          <tw-card
          :heightCard="'405px'"
            :label="'男女比例'">
            <tw-chart
            :chartOption="baroption3.chartOption"
            :dataset="baroption3.dataset"
            :chartDataMaps="baroption3.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="lgwidth" :lg="lgwidth" :class="lgclass" v-show="!isXQshow">
          <tw-card
            :heightCard="'405px'"
            :label="'体质健康'">
            <tw-chart
              :chartOption="baroption1.chartOption"
              :dataset="baroption1.dataset"
              :chartDataMaps="baroption1.chartDataMaps"
              height="302px">
            </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="lgwidth" :lg="lgwidth" class="tw-grid__right" v-show="isXQshow">
          <tw-card
          :heightCard="'405px'"
          :label="'城乡分布'"
          >
           <tw-chart
            :chartOption="baroption5.chartOption"
            :dataset="baroption5.dataset"
            :chartDataMaps="baroption5.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
        <el-col :span="8" :lg="8"  class="tw-grid__right" v-show="isSQshow">
          <tw-card
          :heightCard="'405px'"
            :label="'随迁子女'">
          <tw-chart
            :chartOption="baroption4.chartOption"
            :dataset="baroption4.dataset"
            :chartDataMaps="baroption4.chartDataMaps"
            height='302px'
          >
          </tw-chart>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import TwCard from '@/components/TwCard.vue'
import TwChart from '@/components/TwChart.vue'
export default{
  created () {
    this.baroption1 = JSON.parse(JSON.stringify(this.pie))
    this.baroption2 = JSON.parse(JSON.stringify(this.line))
    this.baroption3 = JSON.parse(JSON.stringify(this.line))
    this.baroption4 = JSON.parse(JSON.stringify(this.line))
    this.baroption5 = JSON.parse(JSON.stringify(this.line))

    // echarts_indexTeacher 模拟体质健康
    // this.$axios.get('/static/weishidataview/jsondata/echarts_indexTeacherStudentRatio.json', {
    //   baseURL: ''
    // }).then(response => {
    //   this.additionalOptions.echarts_indexTeacherStudentRatio = response.data
    // }, response => {
    //   console.log('error')
    // })

    this.resizeChart()
  },
  props: [],
  data () {
    return {
      sumList: [], // 增加数组
      reduceList: [], // 减少数组
      lgwidth: 8,
      lgclass: 'tw-grid__middle',
      isXQshow: false, // 当前选择了学前阶段 则为true 反之false
      isSQshow: true, // 当前选择了学前或者中职阶段 则为true 反之false
      isZZshow: true, // 当前选择了中职阶段 则为true 反之false
      additionalOptions: {
        echarts_indexTeacherStudentRatio: {}
      },
      titleNumFlag: 0, // 头部初始化默认数据
      hero: [],
      pie: {
        chartOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '',
              type: 'pie',
              roseType: 'area',
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  textStyle: {
                    fontSize: 16
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        },
        dataset: [],
        chartDataMaps: []
      },
      baroption1: {},
      baroption2: {},
      baroption3: {},
      baroption4: {},
      baroption5: {},
      line: {
        chartOption: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: true,
            top: 0,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '25%',
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 16,
              interval: 0
            },
            data: []
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 19
            }
          },
          series: []
        },
        chartDataMaps: [],
        dataset: []
      },
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '异动情况',
            type: 'pie',
            color: ['#08f', '#fb6c84'],
            selectedMode: 'single',
            avoidLabelOverlap: true,
            radius: [0, '40%'],
            center: ['50%', '55%'],
            label: {
              normal: {
                position: 'inner',
                fontSize: 16
              },
              formatter: (function (params) {
                return ''
              })()
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          },
          {
            name: '异动情况',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            label: {
              normal: {
                fontSize: 16,
                formatter: '{b}:{d}%'
              }
            },
            data: []
          }
        ]
      },
      pjdata: []
    }
  },
  components: {
    TwCard,
    TwChart
  },
  mounted () {
    // 异动情况
    let vm = this
    this.$nextTick(() => {
      vm.studChangesInt()

      // 随迁子女
      vm.childrenMoveInit()

      // 城乡分布
      vm.urbanRuralInit()

      // 学生体质健康 数据初始化
      vm.stuConstitutionInit()

      // 招生毕业在校人数 数据初始化
      vm.graduationSchoolInit()

      // 男女比例 数据初始化
      vm.maleFemaleInit()
    })
  },
  methods: {
    // 环形图 切换数据
    pieselectchanged (param) {
      let vm = this
      if (param.type === 'pieselectchanged' && param.name === '增加') {
        vm.option.series[1].data = this.sumList
      // sumList: [], //增加数组
      // reduceList: [], //减少数组
      } else if (param.type === 'pieselectchanged' && param.name === '减少') {
        vm.option.series[1].data = this.reduceList
      }
    },
    /**
     * 切换头部样式
    */
    ChageitleNumFlag (index, lable) {
      this.isSQshow = !((index === 5 || index === 1 || index === 6))
      this.isXQshow = (index === 1 || index === 6)
      this.isZZshow = index !== 5
      this.lgwidth = (index === 5 || index === 1 || index === 6) ? 12 : 8
      this.lgclass = (index === 5 || index === 1 || index === 6) ? 'tw-grid__right' : 'tw-grid__middle'
      this.titleNumFlag = index
      this.graduationSchoolInit(lable)
      this.maleFemaleInit(lable)
      this.urbanRuralInit(lable)
      this.childrenMoveInit(lable)
      this.studChangesInt(lable)
      if (lable !== '学前') {
        this.stuConstitutionInit(lable)
      }
    },

    // 招生毕业在校人数 数据初始化
    graduationSchoolInit (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_xsnnbzbrstj?tjly=招生毕业在校人数&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let toolTip = this.baroption2.chartOption.tooltip
          toolTip.formatter = function (datas) {
            var res = datas[0].name + '<br/>'
            for (var i = 0, length = datas.length; i < length; i++) {
              res += datas[i].seriesName + '：' +
               datas[i].data.value + '人' + '<br/>'
            }
            return res
          }
          let dataset = []
          let chartDataMaps = [
            {
              'name': '毕业',
              'dataKey': 'value'
            },
            {
              'name': '招生',
              'dataKey': 'value1'
            },
            {
              'name': '在校',
              'dataKey': 'value2'
            }]
          pageInfo.list.forEach(el => {
            dataset.push({
              name: el.tjnf + '年',
              value: 0,
              value1: 0,
              value2: 0
            })
          })
          dataset = this.$getArrListByname(dataset)
          pageInfo.list.forEach(el => {
            dataset.forEach(item => {
              if (item.name === el.tjnf + '年') {
                if (el.tjlx === '毕业') {
                  item.value = el.xssl
                } else if (el.tjlx === '招生') {
                  item.value1 = el.xssl
                } else {
                  item.value2 = el.xssl
                }
              }
            })
          })
          this.baroption2.dataset = dataset
          this.baroption2.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              barMaxWidth: 18
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },

    // 男女比例数据初始化
    maleFemaleInit (jyjdRoute = '总计') {
      let vm = this
      let xAxis = vm.baroption3.chartOption.xAxis
      let yaxislabel = vm.baroption3.chartOption.yAxis.axisLabel
      let toolTip = vm.baroption3.chartOption.tooltip
      toolTip.formatter = function (datas) {
        var res = datas[0].name + '<br/>'
        for (var i = 0, length = datas.length; i < length; i++) {
          res += datas[i].seriesName + '：' +
               datas[i].data.value + '%' + '<br/>'
        }
        return res
      }
      // 改写纵轴的基础值
      yaxislabel.formatter = '{value}' + '%'
      xAxis.boundaryGap = false
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_xsnnbzbrstj?tjly=男女比例&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let dataset = []
          let sumPaproList = []
          let chartDataMaps = [
            {
              'name': '男',
              'dataKey': 'value'
            },
            {
              'name': '女',
              'dataKey': 'value1'
            }]
          pageInfo.list.forEach(el => {
            dataset.push({
              name: el.tjnf + '年',
              value: 0,
              value1: 0
            })
            sumPaproList.push({
              name: el.tjnf + '年',
              value: 0
            })
          })
          dataset = this.$getArrListByname(dataset)
          sumPaproList = this.$getArrListByname(sumPaproList)
          pageInfo.list.forEach(el => {
            sumPaproList.forEach(item => {
              if (item.name === el.tjnf + '年') {
                item.value += el.xssl
              }
            })
          })
          pageInfo.list.forEach(el => {
            dataset.forEach(item => {
              if (item.name === el.tjnf + '年') {
                if (el.tjlx === '男') {
                  item.value = el.xssl
                } else {
                  item.value1 = el.xssl
                }
              }
            })
          })
          dataset.forEach(item => {
            sumPaproList.forEach(el => {
              if (item.name === el.name) {
                // item.value = (parseInt((item.value / el.value) * 10000)) / 100
                // item.value1 = (parseInt((item.value1 / el.value) * 10000)) / 100

                item.value = Math.round((item.value / el.value) * 100)
                item.value1 = Math.round((item.value1 / el.value) * 100)
              }
            })
          })
          this.baroption3.dataset = dataset
          console.log(dataset)
          this.baroption3.chartOption.color = ['#188dff', '#ffe665']
          let colorList = ['74,199,255,', '255,230,101,']
          this.baroption3.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'line',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(' + colorList[index] + '0)'
                }, {
                  offset: 1,
                  color: 'rgba(' + colorList[index] + '0.35)'
                }])
              }
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },

    // 学生体质健康
    stuConstitutionInit (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_xstzjktj?tjly=体质健康&tjnf=2019&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let dataset = []
          let chartDataMaps = [{
            dataKey: 'value',
            name: '体质健康'
          }]
          pageInfo.list.forEach(el => {
            if(el.jklx==='不及格'){
              dataset[0]={
                name: el.jklx,
                value: el.xssl
              }
            }else  if(el.jklx==='及格'){
              dataset[1]={
                name: el.jklx,
                value: el.xssl
              }
            }else  if(el.jklx==='良好'){
              dataset[2]={
                name: el.jklx,
                value: el.xssl
              }
            }else  if(el.jklx==='优秀'){
              dataset[3]={
                name: el.jklx,
                value: el.xssl
              }
            }
            // dataset.push({
            //   name: el.jklx,
            //   value: el.xssl
            // })
          })
          this.baroption1.dataset = dataset
          this.baroption1.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'pie',
              radius: [30, 110],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              roseType: 'radius',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: '{b}\n{d}%',
                  alignTo: 'none'
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },

    // 城乡分布
    urbanRuralInit (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_cxfbsqzntj?tjly=城乡分布&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let toolTip = this.baroption5.chartOption.tooltip
          toolTip.formatter = function (datas) {
            var res = datas[0].name + '<br/>'
            for (var i = 0, length = datas.length; i < length; i++) {
              res += datas[i].seriesName + '：' +
               datas[i].data.value + '人' + '<br/>'
            }
            return res
          }
          let dataset = []
          let chartDataMaps = [
            {
              'name': '城',
              'dataKey': 'value'
            },
            {
              'name': '镇',
              'dataKey': 'value1'
            },
            {
              'name': '乡',
              'dataKey': 'value2'
            }]
          pageInfo.list.forEach(el => {
            dataset.push({
              name: el.tjnf + '年',
              value: 0,
              value1: 0,
              value2: 0
            })
          })
          dataset = this.$getArrListByname(dataset)
          pageInfo.list.forEach(el => {
            dataset.forEach(item => {
              if (item.name === el.tjnf + '年') {
                if (el.qy === '城') {
                  item.value = el.xssl
                } else if (el.qy === '镇') {
                  item.value1 = el.xssl
                } else {
                  item.value2 = el.xssl
                }
              }
            })
          })
          this.baroption5.dataset = dataset
          this.baroption5.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              // stack: 'bar',
              barMaxWidth: 18 // 控制柱条的宽度
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },

    // 随迁子女
    childrenMoveInit (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_cxfbsqzntj?tjly=随迁子女&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let toolTip = this.baroption4.chartOption.tooltip
          let legend = this.baroption4.chartOption.legend
          let grid = this.baroption4.chartOption.grid
          legend.show = false
          grid.top = '15%'
          let xAxis = this.baroption4.chartOption.xAxis
          xAxis.boundaryGap = false // 取消x轴间距
          toolTip.formatter = function (datas) {
            var res = datas[0].name + '<br/>'
            for (var i = 0, length = datas.length; i < length; i++) {
              res += datas[i].seriesName + '：' +
               datas[i].data.value + '人' + '<br/>'
            }
            return res
          }
          let dataset = []
          let chartDataMaps = [ {
            'name': '随迁子女',
            'dataKey': 'value'
          }]
          pageInfo.list.forEach(item => {
            dataset.push({
              name: item.tjnf + '年',
              value: item.xssl
            })
          })
          this.baroption4.dataset = dataset
          this.baroption4.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'line',
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: 'rgba(74,199,255,0)'
                }, {
                  offset: 1,
                  color: 'rgba(74,199,255,0.35)'
                }])
              }
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },

    // 学生异动情况
    studChangesInt (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_xsydqiktj?tjnf=2019&tjly=异动情况&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let sumreduceList = []
          if (pageInfo.list.length > 0) {
            sumreduceList = [{
              name: '减少',
              value: 0
            }, {
              name: '增加',
              value: 0
            }]
          }
          let sumList = []
          let reduceList = []
          let testData = []
          pageInfo.list.forEach(el => {
            if (el.ydlx === '增加') {
              sumreduceList[1].value += el.xssl
              sumList.push({
                name: el.ydly,
                value: el.xssl
              })
            } else {
              sumreduceList[0].value += el.xssl
              reduceList.push({
                name: el.ydly,
                value: el.xssl
              })
            }
          })
          this.reduceList = reduceList
          this.sumList = sumList
          testData[0] = sumreduceList
          testData[1] = this.sumList
          this.pjdata = testData
          if (testData[1].length <= 0) {
            this.pjdata = []
          }
          this.pjdata.forEach((item, index) => {
            this.option.series[index].data = item
          })
        }
      })
    },

    // 学生数量初始化
    resizeChart () {
      this.$axios.post('/tw-cloud-datatheme-server/themedata/app_sy_xssltj?tjnf=2019').then(res => {
        let {serverResult, pageInfo} = res.data
        if (serverResult.resultCode === '200') {
          let teachList = [{
            id: 1,
            label: '全部',
            value: 0,
            labelName: '总计'
          }, {
            id: 2,
            label: '学前教育',
            value: 0,
            labelName: '幼儿园'
          }, {
            id: 3,
            label: '小学教育',
            value: 0,
            labelName: '小学'
          }, {
            id: 4,
            label: '初中教育',
            value: 0,
            labelName: '初中'
          }, {
            id: 5,
            label: '普高教育',
            value: 0,
            labelName: '高中'
          } ]
          let authList = []
          pageInfo.list.forEach((el, index) => {
            // if (el.jyjb !== '特殊教育') {
            if (el.jyjb === '总计') {
              authList.push({
                label: '全部教育阶段',
                value: this.$reformNumber(el.xssl),
                id: index,
                labelName: '总计'
              })
            } else if (el.jyjb === '幼儿园') {
              authList.push({
                label: '学前阶段',
                value: this.$reformNumber(el.xssl),
                id: index,
                labelName: '幼儿园'
              })
            } else {
              authList.push({
                label: el.jyjb + '阶段',
                value: this.$reformNumber(el.xssl),
                id: index,
                labelName: el.jyjb
              })
            }
          })
          teachList.forEach(el => {
            authList.forEach(item => {
              if (el.labelName === item.labelName) {
                el.value = item.value
              }
            })
          })
          this.hero = teachList
        }
      }).catch(resp => {
        console.log(resp)
      })
    }
  }
}
</script>

<style lang="scss">
.teach-message-title{
  margin-bottom: 20px;
  height: auto;
  text-align: center;
  li{
    background-color: rgba(0,93,255,0.31);
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    display: inline-block;
    min-width: 180px;
    min-height: 80px;
    line-height: 40px;
    margin-right: 20px;
    .xlabel {
      font-size: 20px;
    }
  }
}
.teach-message-active{
  border: 2px solid #015cff;
  box-shadow: inset 0px 1px 15px 4px #015cff;
}
.teach-message-number{
  font-size: 30px;
  color:#06ffff;
  vertical-align: baseline;
  font-family: 'customer';
}
</style>
